
<template>
	<!-- 组件-教学计划表格 -->
	<div>
		<el-row>一个时间段仅允许启用一个模板</el-row>
		<el-row :gutter="16">
			<el-col :span="2">
				<span class="formLable">模板名称</span>
			</el-col>
			<el-col :span="6">
				<el-input maxlength="20" clearable v-if="isEdite==1" v-model="saveParam.planTemplateName" style="width:100%;"></el-input>
				<span class="formValue" v-else>{{queryTxt.name}}</span>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="2">
				<span class="formLable">适用年级</span>
			</el-col>
			<el-col :span="22">
				<el-checkbox-group v-if="isEdite==1" v-model="selectGrades" @change="gradesChange">
					<el-checkbox v-for="(row,index) in gradeList" :key="index"
					 :label="row">{{row.name}}</el-checkbox>
				</el-checkbox-group>
				<span class="formValue" v-else>{{queryTxt.grade}}</span>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="2">
				<span class="formLable">使用周期</span>
			</el-col>
			<el-col :span="6">
				<el-date-picker
					v-if="isEdite==1"
					v-model="applyTime"
					style="width:100%;"
					type="daterange"
					range-separator="-"
					@change="pickTime"
					value-format="yyyy-MM-dd HH:mm:ss"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
				<span class="formValue" v-else>{{queryTxt.date}}</span>
			</el-col>
		</el-row>
		<el-row>
			<plantable ref="plantable"></plantable>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="2">
				<span class="formLable">是否启用</span>
			</el-col>
			<el-col :span="6">
				<el-checkbox v-if="isEdite==1" v-model="isEnable" @change="enableTemplate">启用</el-checkbox>
				<span class="formValue" v-else>{{queryTxt.enable}}</span>
			</el-col>
		</el-row>
		<el-row v-if="isEdite==1" style="text-align:center;">
			<el-button @click="cancle">取消</el-button>
			<el-button @click="save">确定设置</el-button>
		</el-row>
	</div>
</template>

<script>
	import plantable from './plan_table'
	let vm;
	export default{
		components:{plantable},
		data(){
			return {
				isEdite:1,
				gradeList:[],
				selectGrades:[],
				applyTime:'',
				isEnable:false,
				saveParam:{
					orgId:'',
					campusId:'',
					planTemplateName:'',
					planStartTime:'',
					planEndTime:'',
					isEnable:0,
					planTemplateGradeList:[],
					planItemList:[]
				},
				queryTxt:{
					name:'',
					grade:'',
					date:'',
					enable:''
				}
			}
		},
		methods:{
			init(data){
				this.resetAddParam();
				this.saveParam.orgId=data.orgId;
				this.saveParam.campusId=data.campusId;
				this.isEdite=data.isEdite;
				this.$refs['plantable'].init(data);
				if(this.isEdite==0){
					this.queryInit(data.data)
				}
				else{
					this.getDradeList();
				}
			},
			resetAddParam(){
				
				this.selectGrades=[];
				this.applyTime=null;
				this.isEnable=null;

				this.saveParam={
					orgId:'',
					campusId:'',
					planTemplateName:'',
					planStartTime:'',
					planEndTime:'',
					isEnable:0,
					planTemplateGradeList:[],
					planItemList:[]
				}
			},
			queryInit(data){
				this.queryTxt.name=data.planTemplateName;
				this.queryTxt.grade='';
				
				data.planTemplateGradeList.forEach(ele2=>{
					this.queryTxt.grade+=ele2.gradeTypeName+'、'
				});
				this.queryTxt.grade=this.queryTxt.grade.substr(0,this.queryTxt.grade.length-1);
				this.queryTxt.date=data.planStartTime.substr(0,10)+' 至 '+data.planEndTime.substr(0,10);
				this.queryTxt.enable=data.isEnable==0?'未启用':'已启用';
			},
			pickTime(time){
				if(time&&time.length==2){
					this.saveParam.planStartTime=time[0];
					this.saveParam.planEndTime=time[1];
				}
			},
			enableTemplate(val){
				this.saveParam.isEnable=val?1:0;
			},
			getDradeList(){
				api.getGradeTypeList({campusId:this.saveParam.campusId})
				.then(function(data){
					
					if(data.resultCode==2000){
						vm.gradeList=data.list;
					}
					else{
						vm.$message({
							type:'warning',
							message:data.message
						})
					}
				});
			},
			gradesChange(grades){
				if(!grades||grades.length==0){
					this.saveParam.planTemplateGradeList=[];
					return;
				}
				// debugger
				this.saveParam.planTemplateGradeList=[];
				this.selectGrades.forEach(ele=>{
					vm.saveParam.planTemplateGradeList.push({
						gradeTypeId:ele.gradeTypeId,
						gradeTypeName:ele.name,
					})
				});
				
			},
			cancle(){
				this.$emit('cancle')
			},
			save(){
				this.saveParam.planItemList=this.$refs['plantable'].getPlanData();
				if(!this.saveParam.planItemList)return;
				//校验
				if(!this.saveParam.planTemplateName){
					vm.$message({
						type:'warning',
						message:'模板名称不可为空！'
					});
					return;
				}
				//支持字母、数字、汉字和()_-
				let result= /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\(\)\（\）\-\_\[\]]/.test(this.saveParam.planTemplateName);
				if(result){
					vm.$message({
						type:'warning',
						message:'模板名称包含非法字符，请重新输入！'
					});
					return;
				}

				if(!this.saveParam.planTemplateGradeList||this.saveParam.planTemplateGradeList.length==0){
					vm.$message({
						type:'warning',
						message:'请选择适用年级！'
					});
					return;
				}
				if(!this.saveParam.planStartTime||!this.saveParam.planEndTime){
					vm.$message({
						type:'warning',
						message:'请选择使用周期！'
					});
					return;
				}

				api.teachPlanTemplateSave(this.saveParam)
				.then(function(data){
					if(data.resultCode==2000){
						vm.$message({
							type:'success',
							message:'添加成功！'
						})
						vm.$emit('success');
					}
					else{
						vm.$message({
							type:'warning',
							message:data.message
						})
					}
				});
				
			},
		},
		mounted(){
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.formLable,.formValue{
		font-size: 0.16rem;
		line-height: 0.4rem;
	}
	.formLable::before{
		content: '*';
		color: red;
		margin: 0 0.05rem;
	}
	.el-row{
		margin-bottom: 0.16rem;
	}
	.el-checkbox{
		font-size: 0.16rem;
		line-height: 0.4rem;
	}

	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>